body {
	margin: 0;
	padding: 0;
	background: url(../imgs/bg.jpg) no-repeat top center;
	line-height: 1.15;
	box-sizing: border-box;
}
.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
li{
	list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.header {
	position: relative;
	background: url(../imgs/head_bg.png);
	background-size: 100%;
	line-height: 1rem;
	text-align: center;
	h1 {
		font-size: 0.475rem;
		color: #fff;
	}
	.showTime {
		position: absolute;
		top: 0;
		right: 0.375rem;
		line-height: 0.9375rem;
		font-size: 0.25rem;
		color: rgba(255, 255, 255, 0.7);
	}
}
.mianbox {
	display: flex;
	min-width: 12.8rem;
	max-width: 24rem;
	// background-color: #ffffff;
	padding: 0.125rem 0.125rem 0;
	.column {
		flex: 3;
	}
	.column:nth-child(2) {
		flex: 5;
		margin: 0 0.125rem 0.1875rem;
		overflow: hidden;
	}
	.panel {
		position: relative;
		padding: 0 0.1875rem 0.5rem;
		height: 3.875rem;
		border: 1px solid rgba(25, 186, 139, 0.17);
		margin-bottom: 0.1875rem;
		background: url(../imgs/line.png) rgba(255,255,255,.03);
		// box-sizing: border-box;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0.125rem;
			height: 0.125rem;
			border: 0.025rem solid #02a6b5;
			border-right: none; 
			border-bottom: none;
			//简单方法 利用倒影可以解决但是存在兼用性问题 285=h310-(margin-bottom15)-(width:10) 
			// -webkit-box-reflect: below 3.5625rem;
		}
		&::after{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 0.125rem;
			height: 0.125rem;
			border: 0.025rem solid #02a6b5;
			border-left: none; 
			border-bottom: none;
			// -webkit-box-reflect: below 3.5625rem;
		}
		.panel-footer{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			&::before{
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0.125rem;
				height: 0.125rem;
				border: 0.025rem solid #02a6b5;
				border-right: none; 
				border-top: none;
			}
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 0.125rem;
				height: 0.125rem;
				border: 0.025rem solid #02a6b5;
				border-left: none; 
				border-top: none;
			}
		}
		h2{
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
			color: #fff; 
			font-size: 0.25rem;
			font-weight: 400;
			a{
				margin: 0 0.125rem;
				color: #fff;
				text-decoration: none;
			}
		}
		.char{
			height: 3rem;
		}
	}
	.no{
		padding: 0.1875rem;
		background:  rgba(101, 132, 226, 0.1);
		.no-hd{
			position: relative;
			border: 0.0125rem solid rgba(25, 186, 139, 0.17);
			&::before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 0.375rem;
				height: 0.125rem;
				border: 0.025rem solid #02a6b5;
				border-right: none; 
				border-bottom: none;
			}
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 0.375rem;
				height: 0.125rem;
				border: 0.025rem solid #02a6b5;
				border-left: none; 
				border-top: none;
			}
			ul{
				display: flex;
				li{
					position: relative;
					flex: 1;
					text-align: center;
					height: 1rem;
					font-size: 0.875rem;
					color: #ffeb7b;
					font-family:'electronicFont' ;
					&:nth-child(1)::after{
						content: '';
						position: absolute;
						top: 25%;
						right: 0;
						height: 50%;
						width: 0.0125rem;
						background:rgba(255,255,255,.3);
						
						
					}
				}
				
			}
		}
		.no-bd{
			ul{
				margin: 0;
				display: flex;
				li{
					flex: 1;
					text-align: center;
					padding-top: 0.125rem;
					height: 0.5rem;
					line-height: 0.5rem;
					color: rgba(255, 255, 255, 0.7) ;
					font-size: 0.225rem;
				}
			}
		}
	}
	.map{
		position: relative;
		height: 10.125rem;
		.map1{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 6.475rem;
			height: 6.475rem;
			background: url(../imgs/map.png);
			background-size: contain;
			opacity: .3;
		}
		.map2{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 8.0375rem;
			height: 8.0375rem;
			background: url(../imgs/lbx.png);
			background-size: contain;
			opacity: .6;
			animation: rotate1 15s linear infinite;
		}
		.map3{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 7.075rem;
			height: 7.075rem;
			background: url(../imgs/jt.png);
			background-size: contain;
			animation: rotate1 15s reverse linear infinite;
		}
		@keyframes rotate1{
			from{
				transform: translate(-50%,-50%) rotate(0deg);
				
			}
			to{
				transform: translate(-50%,-50%) rotate(360deg);
			}
		}
		.char{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 10.125rem;
		}
	}
	
}
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}